<template>
  <div class="business-model-game">
    <div class="game-header">
      <div class="header-content">
        <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
        <div class="game-title">
          <h1>🎯 商业模式画布</h1>
          <p>设计创新商业模式，打造可持续发展的企业</p>
        </div>
        <div class="game-stats">
          <el-tag type="success" size="large">第 {{ currentStep }}/9 步</el-tag>
          <el-tag type="warning" size="large">创新指数: {{ innovationScore }}</el-tag>
          <el-tag type="danger" size="large">可行性: {{ feasibilityScore }}%</el-tag>
        </div>
      </div>
    </div>

    <div class="game-container">
      <!-- 开始界面 -->
      <div v-if="gameStatus === 'ready'" class="game-start">
        <div class="start-card">
          <el-icon class="start-icon"><Grid /></el-icon>
          <h2>商业模式画布挑战</h2>
          <p>作为创业者，你需要设计一个完整的商业模式画布，包括9个关键要素</p>
          <div class="game-rules">
            <h3>商业模式画布九要素</h3>
            <div class="canvas-preview">
              <div class="canvas-section" style="grid-area: p1">
                <h4>价值主张</h4>
                <p>为客户创造什么价值</p>
              </div>
              <div class="canvas-section" style="grid-area: p2">
                <h4>客户细分</h4>
                <p>服务哪些客户群体</p>
              </div>
              <div class="canvas-section" style="grid-area: p3">
                <h4>客户关系</h4>
                <p>如何与客户互动</p>
              </div>
              <div class="canvas-section" style="grid-area: c1">
                <h4>关键业务</h4>
                <p>核心业务活动</p>
              </div>
              <div class="canvas-section" style="grid-area: c2">
                <h4>核心资源</h4>
                <p>关键资产和资源</p>
              </div>
              <div class="canvas-section" style="grid-area: c3">
                <h4>重要合作</h4>
                <p>关键合作伙伴</p>
              </div>
              <div class="canvas-section" style="grid-area: r1">
                <h4>收入来源</h4>
                <p>如何获得收入</p>
              </div>
              <div class="canvas-section" style="grid-area: r2">
                <h4>成本结构</h4>
                <p>主要成本构成</p>
              </div>
              <div class="canvas-section" style="grid-area: c4">
                <h4>渠道通路</h4>
                <p>如何触达客户</p>
              </div>
            </div>
            <ul>
              <li>🎯 完成9个模块的设计</li>
              <li>💡 系统会评估创新性和可行性</li>
              <li>📊 获得商业模式完整性评分</li>
              <li>🏆 挑战不同行业和场景</li>
            </ul>
          </div>
          <el-button type="primary" size="large" @click="startGame">
            <el-icon><CaretRight /></el-icon>
            开始设计
          </el-button>
        </div>
      </div>

      <!-- 游戏进行中 -->
      <div v-if="gameStatus === 'playing'" class="game-playing">
        <el-row :gutter="20">
          <!-- 左侧：画布设计 -->
          <el-col :span="16">
            <el-card class="canvas-card">
              <template #header>
                <div class="canvas-header">
                  <h3>{{ currentCase.name }} - 商业模式画布</h3>
                  <el-tag>{{ currentCase.industry }}</el-tag>
                </div>
              </template>

              <div class="business-canvas">
                <!-- 客户相关 -->
                <div class="canvas-row customer-row">
                  <div class="canvas-cell customer-segments">
                    <h4>客户细分</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.customerSegments"
                        type="textarea"
                        :rows="3"
                        placeholder="描述目标客户群体..."
                        :disabled="currentStep !== 1"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell value-propositions">
                    <h4>价值主张</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.valuePropositions"
                        type="textarea"
                        :rows="3"
                        placeholder="描述为客户创造的价值..."
                        :disabled="currentStep !== 2"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell channels">
                    <h4>渠道通路</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.channels"
                        type="textarea"
                        :rows="3"
                        placeholder="描述如何触达客户..."
                        :disabled="currentStep !== 3"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell customer-relationships">
                    <h4>客户关系</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.customerRelationships"
                        type="textarea"
                        :rows="3"
                        placeholder="描述与客户的关系类型..."
                        :disabled="currentStep !== 4"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell revenue-streams">
                    <h4>收入来源</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.revenueStreams"
                        type="textarea"
                        :rows="3"
                        placeholder="描述收入来源..."
                        :disabled="currentStep !== 5"
                      />
                    </div>
                  </div>
                </div>

                <!-- 基础设施 -->
                <div class="canvas-row infrastructure-row">
                  <div class="canvas-cell key-activities">
                    <h4>关键业务</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.keyActivities"
                        type="textarea"
                        :rows="3"
                        placeholder="描述核心业务活动..."
                        :disabled="currentStep !== 6"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell key-resources">
                    <h4>核心资源</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.keyResources"
                        type="textarea"
                        :rows="3"
                        placeholder="描述关键资源..."
                        :disabled="currentStep !== 7"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell key-partnerships">
                    <h4>重要合作</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.keyPartnerships"
                        type="textarea"
                        :rows="3"
                        placeholder="描述关键合作伙伴..."
                        :disabled="currentStep !== 8"
                      />
                    </div>
                  </div>
                  <div class="canvas-cell cost-structure">
                    <h4>成本结构</h4>
                    <div class="cell-content">
                      <el-input
                        v-model="canvasData.costStructure"
                        type="textarea"
                        :rows="3"
                        placeholder="描述主要成本..."
                        :disabled="currentStep !== 9"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="canvas-actions">
                <el-button 
                  type="primary" 
                  size="large"
                  :disabled="!canSubmitCurrentStep"
                  @click="submitStep"
                >
                  {{ currentStep === 9 ? '完成设计' : '下一步' }}
                </el-button>
                <el-button @click="resetCurrentStep">重新填写</el-button>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧：指导面板 -->
          <el-col :span="8">
            <el-card class="guidance-panel">
              <h3>📋 设计指导</h3>
              <div class="current-step">
                <h4>{{ currentStepInfo.title }}</h4>
                <p>{{ currentStepInfo.description }}</p>
              </div>

              <div class="tips-section">
                <h4>💡 设计要点</h4>
                <ul>
                  <li v-for="tip in currentStepInfo.tips" :key="tip">{{ tip }}</li>
                </ul>
              </div>

              <div class="examples-section">
                <h4>📝 示例参考</h4>
                <div class="example-item">
                  <strong>{{ currentCase.name }}示例：</strong>
                  <p>{{ currentStepInfo.example }}</p>
                </div>
              </div>
            </el-card>

            <el-card class="progress-panel">
              <h3>🎯 设计进度</h3>
              <div class="progress-list">
                <div 
                  v-for="(step, index) in stepList" 
                  :key="index"
                  class="progress-item"
                  :class="{ 
                    completed: index < currentStep - 1,
                    current: index === currentStep - 1,
                    pending: index > currentStep - 1
                  }"
                >
                  <div class="step-number">{{ index + 1 }}</div>
                  <div class="step-title">{{ step.title }}</div>
                  <el-icon v-if="index < currentStep - 1" class="check-icon">
                    <CircleCheck />
                  </el-icon>
                </div>
              </div>
            </el-card>

            <el-card class="score-panel">
              <h3>📊 评分指标</h3>
              <div class="score-item">
                <span>创新指数</span>
                <el-progress :percentage="innovationScore" :color="getScoreColor(innovationScore)" />
              </div>
              <div class="score-item">
                <span>可行性</span>
                <el-progress :percentage="feasibilityScore" :color="getScoreColor(feasibilityScore)" />
              </div>
              <div class="score-item">
                <span>完整性</span>
                <el-progress :percentage="completenessScore" :color="getScoreColor(completenessScore)" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 游戏结束 -->
      <div v-if="gameStatus === 'finished'" class="game-finish">
        <div class="finish-card">
          <el-icon class="finish-icon" :class="finalGrade"><Trophy /></el-icon>
          <h2>商业模式设计完成！</h2>
          <div class="final-grade" :class="finalGrade">{{ finalGrade }} 级商业模式设计师</div>
          <p class="grade-text">{{ gradeText }}</p>

          <div class="final-stats">
            <div class="stat-item">
              <div class="stat-label">创新指数</div>
              <div class="stat-value">{{ innovationScore }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">可行性</div>
              <div class="stat-value">{{ feasibilityScore }}%</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">完整性</div>
              <div class="stat-value">{{ completenessScore }}%</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">综合得分</div>
              <div class="stat-value highlight">{{ finalScore }}</div>
            </div>
          </div>

          <div class="canvas-summary">
            <h3>📋 你的商业模式画布</h3>
            <div class="summary-grid">
              <div class="summary-item">
                <h4>客户细分</h4>
                <p>{{ canvasData.customerSegments || '未填写' }}</p>
              </div>
              <div class="summary-item">
                <h4>价值主张</h4>
                <p>{{ canvasData.valuePropositions || '未填写' }}</p>
              </div>
              <div class="summary-item">
                <h4>收入来源</h4>
                <p>{{ canvasData.revenueStreams || '未填写' }}</p>
              </div>
              <div class="summary-item">
                <h4>成本结构</h4>
                <p>{{ canvasData.costStructure || '未填写' }}</p>
              </div>
            </div>
          </div>

          <div class="action-buttons">
            <el-button type="primary" size="large" @click="restartGame">重新设计</el-button>
            <el-button size="large" @click="goBack">返回游戏中心</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Grid, CaretRight, Trophy, CircleCheck
} from '@element-plus/icons-vue'

const router = useRouter()

const gameStatus = ref('ready')
const currentStep = ref(1)
const currentCaseIndex = ref(0)
const innovationScore = ref(0)
const feasibilityScore = ref(0)
const completenessScore = ref(0)

const canvasData = ref({
  customerSegments: '',
  valuePropositions: '',
  channels: '',
  customerRelationships: '',
  revenueStreams: '',
  keyActivities: '',
  keyResources: '',
  keyPartnerships: '',
  costStructure: ''
})

const cases = [
  {
    id: 1,
    name: '智能健身APP',
    industry: '健康科技',
    description: '设计一个AI驱动的个人健身指导应用'
  },
  {
    id: 2,
    name: '共享办公空间',
    industry: '共享经济',
    description: '设计一个面向创业者的共享办公平台'
  },
  {
    id: 3,
    name: '在线教育平台',
    industry: '教育培训',
    description: '设计一个职业技能在线培训平台'
  }
]

const currentCase = computed(() => cases[currentCaseIndex.value])

const stepList = [
  { title: '客户细分', key: 'customerSegments' },
  { title: '价值主张', key: 'valuePropositions' },
  { title: '渠道通路', key: 'channels' },
  { title: '客户关系', key: 'customerRelationships' },
  { title: '收入来源', key: 'revenueStreams' },
  { title: '关键业务', key: 'keyActivities' },
  { title: '核心资源', key: 'keyResources' },
  { title: '重要合作', key: 'keyPartnerships' },
  { title: '成本结构', key: 'costStructure' }
]

const stepGuidance = {
  1: {
    title: '客户细分 (Customer Segments)',
    description: '定义你的目标客户群体，考虑他们的需求、行为和特征。',
    tips: [
      '考虑不同客户群体的需求差异',
      '分析客户的人口统计学特征',
      '识别客户的行为模式和偏好'
    ],
    example: '健身爱好者、忙碌的上班族、减肥需求人群等'
  },
  2: {
    title: '价值主张 (Value Propositions)',
    description: '描述你为客户创造的价值，解决什么问题，满足什么需求。',
    tips: [
      '明确解决的核心问题',
      '突出独特的价值点',
      '考虑情感和功能价值'
    ],
    example: 'AI个性化训练计划、实时健康监测、专业教练指导等'
  },
  3: {
    title: '渠道通路 (Channels)',
    description: '说明如何触达客户，通过哪些渠道与客户沟通和交付价值。',
    tips: [
      '选择有效的触达渠道',
      '考虑客户获取成本',
      '建立多渠道覆盖'
    ],
    example: 'App Store下载、社交媒体推广、线下健身房合作等'
  },
  4: {
    title: '客户关系 (Customer Relationships)',
    description: '描述你希望与客户建立的关系类型和互动方式。',
    tips: [
      '选择合适的客户关系类型',
      '考虑客户生命周期的管理',
      '建立客户忠诚度'
    ],
    example: '自动化服务、社区互动、一对一教练指导等'
  },
  5: {
    title: '收入来源 (Revenue Streams)',
    description: '说明如何从客户那里获得收入，有哪些收入模式。',
    tips: [
      '设计可持续的收入模式',
      '考虑不同的定价策略',
      '平衡短期和长期收入'
    ],
    example: '订阅费、付费课程、广告收入、数据服务等'
  },
  6: {
    title: '关键业务 (Key Activities)',
    description: '列出为了交付价值主张必须执行的最重要的活动。',
    tips: [
      '聚焦核心业务活动',
      '考虑价值链的关键环节',
      '确保活动支持价值主张'
    ],
    example: '内容创作、技术开发、用户运营、数据分析等'
  },
  7: {
    title: '核心资源 (Key Resources)',
    description: '识别让商业模式运转所需的最重要的资源。',
    tips: [
      '识别关键资产和资源',
      '考虑人力资源和技术资源',
      '评估资源的稀缺性'
    ],
    example: '技术团队、用户数据、品牌影响力、资金等'
  },
  8: {
    title: '重要合作 (Key Partnerships)',
    description: '列出让商业模式有效运转所需的供应商和合作伙伴。',
    tips: [
      '识别关键合作伙伴',
      '考虑合作的价值和风险',
      '建立长期合作关系'
    ],
    example: '健身设备厂商、健康数据提供商、支付平台等'
  },
  9: {
    title: '成本结构 (Cost Structure)',
    description: '描述运营商业模式所需的所有成本。',
    tips: [
      '识别主要成本类别',
      '考虑固定成本和变动成本',
      '优化成本结构'
    ],
    example: '技术开发成本、市场推广费用、人力成本、运营成本等'
  }
}

const currentStepInfo = computed(() => stepGuidance[currentStep.value])

const canSubmitCurrentStep = computed(() => {
  const currentKey = stepList[currentStep.value - 1].key
  return canvasData.value[currentKey].trim().length > 0
})

const finalScore = computed(() => {
  return Math.round((innovationScore.value + feasibilityScore + completenessScore) / 3)
})

const finalGrade = computed(() => {
  if (finalScore.value >= 85) return 'S'
  if (finalScore.value >= 75) return 'A'
  if (finalScore.value >= 65) return 'B'
  if (finalScore.value >= 55) return 'C'
  return 'D'
})

const gradeText = computed(() => {
  const texts = {
    S: '卓越！你设计了一个极具创新性和可行性的商业模式！',
    A: '优秀！你的商业模式设计思路清晰，具有很强的商业价值！',
    B: '良好！你掌握了商业模式设计的基本方法，有提升空间！',
    C: '及格！商业模式基本完整，但需要更多创新思考！',
    D: '需要改进！建议深入学习商业模式设计理论！'
  }
  return texts[finalGrade.value]
})

const getScoreColor = (score) => {
  if (score >= 80) return '#67c23a'
  if (score >= 60) return '#e6a23c'
  return '#f56c6c'
}

const startGame = () => {
  gameStatus.value = 'playing'
  currentCaseIndex.value = Math.floor(Math.random() * cases.length)
  ElMessage.success(`开始设计：${currentCase.value.name}`)
}

const submitStep = () => {
  if (!canSubmitCurrentStep.value) {
    ElMessage.warning('请先填写当前步骤的内容')
    return
  }

  // 计算得分
  const content = canvasData.value[stepList[currentStep.value - 1].key]
  const length = content.length
  const innovation = Math.min(100, 50 + length * 2)
  const feasibility = Math.min(100, 60 + Math.random() * 30)
  
  innovationScore.value = Math.round((innovationScore.value + innovation) / 2)
  feasibilityScore.value = Math.round((feasibilityScore.value + feasibility) / 2)
  completenessScore.value = Math.round((currentStep.value / 9) * 100)

  ElMessage.success(`第${currentStep.value}步完成！创新性+${Math.round(innovation)}，可行性+${Math.round(feasibility)}`)

  if (currentStep.value < 9) {
    currentStep.value++
  } else {
    gameStatus.value = 'finished'
    ElMessage.success('商业模式画布设计完成！')
  }
}

const resetCurrentStep = () => {
  const currentKey = stepList[currentStep.value - 1].key
  canvasData.value[currentKey] = ''
  ElMessage.info('当前步骤已重置')
}

const restartGame = () => {
  gameStatus.value = 'ready'
  currentStep.value = 1
  innovationScore.value = 0
  feasibilityScore.value = 0
  completenessScore.value = 0
  Object.keys(canvasData.value).forEach(key => {
    canvasData.value[key] = ''
  })
}

const goBack = () => {
  router.push('/learning/games')
}
</script>

<style scoped>
.business-model-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.game-header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.game-stats {
  display: flex;
  gap: 10px;
}

.game-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 开始界面 */
.game-start {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.start-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 800px;
  text-align: center;
}

.start-icon {
  font-size: 80px;
  color: #409eff;
  margin-bottom: 20px;
}

.start-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
}

.game-rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0 30px;
}

.game-rules h3 {
  margin: 0 0 15px 0;
}

.canvas-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  margin: 20px 0;
  height: 200px;
}

.canvas-section {
  background: #ecf5ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.canvas-section h4 {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #409eff;
}

.canvas-section p {
  margin: 0;
  font-size: 10px;
  color: #606266;
}

.game-rules ul {
  margin: 0;
  padding-left: 20px;
}

.game-rules li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 游戏进行中 */
.canvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.canvas-header h3 {
  margin: 0;
  font-size: 18px;
}

.business-canvas {
  background: white;
  border: 2px solid #409eff;
  border-radius: 8px;
  overflow: hidden;
}

.canvas-row {
  display: flex;
  height: 200px;
}

.canvas-cell {
  flex: 1;
  border: 1px solid #dcdfe6;
  padding: 15px;
  position: relative;
}

.canvas-cell h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #409eff;
  font-weight: bold;
}

.cell-content {
  height: calc(100% - 30px);
}

.customer-row .canvas-cell:nth-child(1) { background: #fff2e8; }
.customer-row .canvas-cell:nth-child(2) { background: #e8f5e8; }
.customer-row .canvas-cell:nth-child(3) { background: #f0f9ff; }
.customer-row .canvas-cell:nth-child(4) { background: #fdf6ec; }
.customer-row .canvas-cell:nth-child(5) { background: #f4f4f5; }

.infrastructure-row .canvas-cell:nth-child(1) { background: #fff1f0; }
.infrastructure-row .canvas-cell:nth-child(2) { background: #f6ffed; }
.infrastructure-row .canvas-cell:nth-child(3) { background: #e6f7ff; }
.infrastructure-row .canvas-cell:nth-child(4) { background: #fffbe6; }

.canvas-actions {
  margin-top: 20px;
  text-align: center;
}

.guidance-panel h3,
.progress-panel h3,
.score-panel h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
}

.current-step {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.current-step h4 {
  margin: 0 0 8px 0;
  color: #409eff;
}

.current-step p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.tips-section,
.examples-section {
  margin-bottom: 20px;
}

.tips-section h4,
.examples-section h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.tips-section ul {
  margin: 0;
  padding-left: 20px;
}

.tips-section li {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.example-item {
  background: #f0f9ff;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.example-item strong {
  color: #409eff;
}

.example-item p {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: #606266;
}

.progress-panel {
  margin-top: 20px;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s;
}

.progress-item.completed {
  background: #f0f9ff;
  color: #409eff;
}

.progress-item.current {
  background: #e6f7ff;
  border: 2px solid #409eff;
}

.progress-item.pending {
  background: #f5f5f5;
  color: #909399;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.progress-item.pending .step-number {
  background: #c0c4cc;
}

.step-title {
  flex: 1;
  font-size: 14px;
}

.check-icon {
  color: #67c23a;
  font-size: 16px;
}

.score-panel {
  margin-top: 20px;
}

.score-item {
  margin-bottom: 15px;
}

.score-item span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

/* 游戏结束 */
.game-finish {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.finish-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 900px;
  text-align: center;
}

.finish-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.finish-icon.S,
.finish-icon.A {
  color: #f59e0b;
}

.finish-card h2 {
  margin: 0 0 20px 0;
  font-size: 32px;
}

.final-grade {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
}

.final-grade.S {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
}

.final-grade.A {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.grade-text {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #606266;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
}

.stat-label {
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-value.highlight {
  font-size: 32px;
}

.canvas-summary {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-align: left;
}

.canvas-summary h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #303133;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.summary-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.summary-item h4 {
  margin: 0 0 8px 0;
  color: #409eff;
  font-size: 14px;
}

.summary-item p {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

@media (max-width: 1200px) {
  .game-playing {
    display: block;
  }
  
  .final-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>

